// General Styles
$font-family: 'Lato', sans-serif;
$code-font-family: 'Fira Code', monospace;
$text-size: 16px;
$text-line-height: 18px;

// Header
$header-height: 70px;
$editor-topbar-height: 60px;
$editor-mobile-height: 48px;

// Sidebar
$sidebar-width: 160px;
$sidebar-tablet-width: 60px;

// Console
$console-height: 300px;

// Responsive
$mobile-width: 480px;
$tablet-width: 840px;

$force-desktop-height: 1080px;
$force-desktop-width: 1920px;

@mixin tablet {
  @media (min-width: #{$mobile-width}) and (max-width: #{$tablet-width}) {
    .scastie {
      .app:not(.force-desktop) {
        @content;
      }
    }
  }
}

@mixin phone {
  @media only screen and (max-width: #{$mobile-width}) {
    .scastie {
      .app:not(.force-desktop) {
        @content;
      }
    }
  }
}

@include phone {
  .scastie {
    .app.force-desktop {
      min-height: $force-desktop-height;
      min-width: $force-desktop-width;
      position: relative;

      .editor-mobile {
        display: none;
      }
    }
  }
}

@mixin position($position, $top, $right, $bottom, $left) {
  position: $position;
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left;
}

@mixin size($width, $height) {
  width: $width;
  height: $height;
}

$grid-columns: 12;
$default-feature: min-width;

@mixin media($query: $feature $value $columns, $total-columns: $grid-columns) {
  @if length($query) == 1 {
    @media screen and ($default-feature: nth($query, 1)) {
      $default-grid-columns: $grid-columns;
      $grid-columns: $total-columns !global;
      @content;
      $grid-columns: $default-grid-columns !global;
    }
  } @else {
    $loop-to: length($query);
    $media-query: "screen and ";
    $default-grid-columns: $grid-columns;
    $grid-columns: $total-columns !global;

    @if is-not(is-even(length($query))) {
      $grid-columns: nth($query, $loop-to) !global;
      $loop-to: $loop-to - 1;
    }

    $i: 1;
    @while $i <= $loop-to {
      $media-query: $media-query + "(" + nth($query, $i) + ": " + nth($query, $i + 1) + ") ";

      @if ($i + 1) != $loop-to {
        $media-query: $media-query + "and ";
      }

      $i: $i + 2;
    }

    @media #{$media-query} {
      @content;
      $grid-columns: $default-grid-columns !global;
    }
  }
}
